<template>
  <view class="forFile">
    <view class="fileimg">
      <img
        src="https://dumipjfilezhxj.oss-cn-beijing.aliyuncs.com/StaticResource/static/images/love.png"
        alt=""
      />
    </view>
    <view class="peoBox" v-if="data.length">
      <view
        class="item"
        v-for="item in data"
        :key="item"
        @click="gotoInfo('/subpage/kindness/index?userId=' + item.userId)"
      >
        <img :src="item.avatar" alt="图片解析错误" />
        <view class="name">{{ item.nickName }}</view>
      </view>
    </view>
    <view style="width: 700rpx; height: 17rpx; background: #f7f7f7"></view>
  </view>
</template>

<script>
import config from "@/config";
const baseUrl = config.baseUrl;
export default {
  name: "forFile",
  props: ["data"],
  data() {
    return {
      baseUrl,
    };
  },
  methods: {
    gotoInfo(url) {
      uni.navigateTo({ url: url });
    },
  },
  mounted() {},
};
</script>

<style lang="scss">
.forFile {
  width: 690rpx;
  .peoBox {
    padding: 25rpx 0 70rpx 0;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    .item {
      text-align: center;
      margin-top: 20rpx;
      margin-right: 20rpx;
      img {
        border: 1rpx solid #f6f7f9;
        width: 88rpx;
        height: 88rpx;
        border-radius: 100%;
      }
      .name {
        margin-top: 18rpx;
        font-size: 29rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        // width: 88rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .fileimg {
    padding: 40rpx 0;
    img {
      width: 125rpx;
      height: 30rpx;
    }
  }
}
</style>
